website / src / pages / projects / [...slug].astro

---
import { type CollectionEntry, getCollection, render } from "astro:content";
import { Image } from "astro:assets";
import Layout from "@layouts/Layout.astro";
import IconLink from "@components/IconLink.astro";
import { Icon } from "astro-icon/components";
export async function getStaticPaths() {
  const renameEntries = await getCollection("projects");
  return renameEntries.map((entry) => ({
    params: { slug: entry.id },
    props: { entry }
  }));
}
const { entry } = Astro.props as { entry: CollectionEntry<"projects"> };
const { Content } = await render(entry);

const firstOtherLink = entry.data.links?.other?.[0];

const restOther = entry.data.links?.other?.slice(1);

const og = {
  src: entry.data.image,
  alt: entry.data.name
};
---

<Layout title={entry.data.name} description={entry.data.summary} keywords={entry.data.tags} og={og}>
  <div class="hero">
    <div class="txt">
      <div class="project-header">
        <h1 class="gradient-text">{entry.data.name}</h1>
        <p>
          {entry.data.timespan.from}{entry.data.timespan.to && <> - {entry.data.timespan.to}</>},
          {entry.data.tags.join(", ")}
        </p>
      </div>
      <p>{entry.data.summary}</p>
      <div class="ctas">
        {
          entry.data.links?.github && (
            <span>
              <a href={`https://github.com/${entry.data.links.github}`} role="button">
                <Icon name="bi:github" /> GitHub
              </a>
            </span>
          )
        }
        {
          firstOtherLink && (
            <span>
              <a href={firstOtherLink.url} role="button" class="secondary">
                <Icon name={`${firstOtherLink.iconPackOverride ?? "bi"}:${firstOtherLink.icon}`} />
                {firstOtherLink.label}
              </a>
            </span>
          )
        }
      </div>
      <div class="links">
        {
          restOther &&
            restOther.map((l) => (
              <span>
                <IconLink
                  icon={l.icon}
                  overridePack={l.iconPackOverride}
                  href={l.url}
                  placement="bottom"
                  label={l.label}
                />
              </span>
            ))
        }
      </div>
    </div>
    <div class="img-container">
      <Image
        transition:name={`project-img-${entry.id}`}
        alt={entry.data.name}
        src={entry.data.image}
      />
    </div>
  </div>
  <h2>About This Project</h2>
  <Content />
</Layout>

<style>
  div.project-header h1 {
    margin-bottom: var(--1);
  }

  div.project-header p {
    font-size: var(--2);
    margin: 0;
  }

  .hero {
    display: flex;
    gap: var(--5);
    justify-content: space-between;
    align-items: center;
    margin: var(--4) 0;
  }

  @media (width <= 1300px) {
    .hero {
      flex-direction: column-reverse;
      margin-top: var(--1);
      gap: var(--2);
      text-align: center;
    }

    .links,
    .ctas {
      margin: auto;
    }

    .hero p {
      margin: 0;
    }

    div.project-header {
      h1 {
        margin-top: 0;
      }
      p {
        text-wrap: balance;
      }
    }
  }

  .hero .txt {
    width: 100%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: var(--2);
  }

  .hero .ctas {
    display: flex;
    align-items: center;
    gap: var(--2);
  }

  .hero .ctas a[role="button"] {
    display: flex;
    align-items: center;
    gap: var(--small);
  }

  .hero .img-container {
    flex-grow: 1;
    width: 100%;
    justify-content: end;
    align-items: center;
    display: flex;
    margin: auto;
  }

  .hero .img-container img {
    border-radius: 5px;
    filter: drop-shadow(0 0 100px color(from var(--primary) srgb r g b / 0.2));
    width: 60%;
    height: auto;
    margin: auto;
  }

  .links {
    display: flex;
    gap: var(--2);
  }
</style>